<template>
  <div class="bg">
    <div class="login-box">
      <span class="title">TSINGLOG后台管理系统</span>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item class="form-item" label="用户名">
          <el-input ref="usernameInput" v-model="form.username">
            <i slot="prefix" class="iconfont icon-tubiao211 front-icon"></i>
          </el-input>
          <span :class="['tip', {'show-tip': tip.showUsernameTip}]">{{tip.usernameTip}}</span>
        </el-form-item>
        <el-form-item class="form-item" label="密码">
          <el-input ref="passwordInput" :type="inputType" v-model="form.password">
            <i slot="prefix" class="iconfont icon-mima front-icon"></i>
            <i
              slot="suffix"
              v-if="!visibilityOfPassword"
              class="iconfont icon-mimabukejian back-icon"
              @click="changeVisibilityOfPassword"></i>
            <i
              slot="suffix"
              v-else
              class="iconfont icon-mimakejian back-icon"
              @click="changeVisibilityOfPassword"></i>
          </el-input>
          <span :class="['tip', {'show-tip': tip.showPasswordTip}]">{{tip.passwordTip}}</span>
        </el-form-item>
        <el-form-item class="form-item" label="验证">
          <validate @success="setToken"></validate>
          <span :class="['tip', {'show-tip': tip.showVerifyTip}]">{{tip.verifyTip}}</span>
        </el-form-item>
      </el-form>
      <div class="button-box">
        <el-button type="info">忘记密码</el-button>
        <el-button type="primary" @click="submitLogin">登录</el-button>
      </div>
    </div>
  </div>

</template>

<script>

  import Validate from "components/common/verifyCode/NC";

  import {login} from "../../network/viewsRequest/user";

  export default {
    name: "LoginView",
    data() {
      return {
        form: {
          username: '',
          password: '',
          token: '',
        },
        tip: {
          showUsernameTip: false, // 是否显示用户名相关的错误信息
          showPasswordTip: false, // 是否显示密码相关的错误信息
          showVerifyTip: false, // 是否显示验证相关的错误信息
          usernameTip: '请输入用户名', // 用户名相关的错误信息
          passwordTip: '请输入密码', // 密码相关的错误信息
          verifyTip: '请验证后再登录', // 验证相关的错误信息
        },
        enableSubmit: false, // 是否通过图片验证码的校验
        inputType: 'password', // 密码输入框的类型，默认情况下type为password，即密码不可见
        visibilityOfPassword: false, // 密码是否可见，默认不可见
      }
    },
    methods: {
      changeVisibilityOfPassword() {
        if (this.visibilityOfPassword) { // 点击前为可见的情况
          // 设置为不可见
          this.visibilityOfPassword = false;
          this.inputType = 'password';
        } else { // 点击前为不可见的情况
          // 设置为可见
          this.visibilityOfPassword = true;
          this.inputType = '';
        }
      },
      /**
       * 提交登录
       * @constructor
       */
      submitLogin() {
        // 校验填写的内容
        if (!this.checkInput()) {
          return false;
        }

        // 进行登录
        login(this.form).then(res => {
          // console.log(res);
          if (res.code == 1) {
            this.$store.commit("assignToken", res.data);
            // 跳转到主页
            this.$router.push("/dashboard");
          } else {
            this.$message.error(res.message);
            this.ResetValidate();
          }
        })

        // this.$ajax
        //   .post(url, this.qs.stringify(PostData))
        //   .then(res => {
        //     // console.log(res);
        //     if (res.code === 200) {
        //       this.$message({
        //         type: "success",
        //         message: "登录成功",
        //         center: true,
        //         duration: 1000
        //       });
        //     } else {
        //       this.$message.error({ message: res.description });
        //       this.ResetValidate();
        //     }
        //   })
        //   .catch(() => {
        //     this.ResetValidate();
        //   });
      },
      /**
       * 提交登录前先进行的表单填写的校验
       */
      checkInput() {
        this.tip.showUsernameTip = false;
        this.tip.showPasswordTip = false;
        this.tip.showVerifyTip = false;

        if (this.form.username == null || this.form.username == '') {
          this.$message.error("请输入用户名");
          this.$refs.usernameInput.focus();
          this.tip.usernameTip = '请输入用户名';
          this.tip.showUsernameTip = true;
          return false;
        }

        if (this.form.username.length > 8) {
          this.$message.error("用户名长度不能超过8个字符");
          this.$refs.usernameInput.focus();
          this.tip.usernameTip = '用户名长度不能超过8个字符';
          this.tip.showUsernameTip = true;
          return false;
        }

        if (this.form.password == null || this.form.password == '') {
          this.$message.error("请输入密码");
          this.$refs.passwordInput.focus();
          this.tip.passwordTip = '请输入密码';
          this.tip.showPasswordTip = true;
          return false;
        }

        if (this.form.password.length > 20 || this.form.password.length < 6) {
          this.$message.error("密码的长度在6~20位之间");
          this.$refs.passwordInput.focus();
          this.tip.passwordTip = '密码的长度在6~20位之间';
          this.tip.showPasswordTip = true;
          return false;
        }

        if (!this.enableSubmit) {
          this.$message.error("请验证后再登录");
          this.tip.verifyTip = '请验证后再登录';
          this.tip.showVerifyTip = true;
          return false;
        }

        if (!this.ncVerify()) {
          this.$message.error("请重新验证");
          this.tip.verifyTip = '请重新验证';
          this.tip.showVerifyTip = true;
          return false;
        }

        return true;
      },
      /**
       * 确定验证是否成功
       */
      ncVerify() {
        if (!this.form.token) {
          this.ResetValidate();
          return false;
        }
        return true;
      },
      /**
       * 重置验证状态
       */
      ResetValidate() {
        this.form.token = "";
        LUOCAPTCHA && LUOCAPTCHA.reset();
      },
      /**
       * 给token赋值
       * @param res 验证返回的结果
       */
      setToken(res) {
        this.enableSubmit = true;
        this.form.token = res;
      }
    },
    components: {
      Validate
    }
  }
</script>



<style scoped>
  @import "~assets/fonts/iconfont.css";
  .bg {
    width: 100%;
    height: 100%;
    background: url("~assets/images/login-bg.png") no-repeat center bottom;
    background-size: cover;
    overflow: hidden;
    color: #fff;
  }
  .bg .login-box {
    width: 600px;
    height: 390px;
    /*background-color: #fff;*/
    border: 1px solid white;
    border-radius: 6px;
    margin: 200px auto;
    overflow: hidden;

  }
  .bg .title {
    display: block;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: PingFang SC, San Francisco UI;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
    font-weight: bold;

  }
  .bg .form-item {
    padding-right: 25px;
    color: #fff;
    margin-bottom: 0px;
  }

  .bg .form-item .front-icon {
    display: inline-block;
    margin-left: 5px
  }

  .bg .form-item .back-icon {
    display: inline-block;
    margin-right: 5px;
    font-size: 24px;
    cursor: pointer;
  }

  .bg .button-box {
    /*margin-top: 20px;*/
    text-align: right;
    padding-right: 25px;
  }

  .tip {
    display: block;
    font-size: 14px;
    color: #F56C6C;
    margin-top: -5px;
    visibility: hidden;
    letter-spacing: 0.5px;
  }

  .show-tip {
    visibility: visible;
  }
</style>

<style>
  .el-form-item__label {
    color: #fff;
  }
</style>